<template>
	<div class="swiper">
		<swiper :options="swiperOption" ref="mySwiperA">
			<!-- 幻灯内容 -->
			<swiper-slide v-for="(item, i) in data">
				<router-link :to="setPath(item.id)">
					<img :src="setImage(item.logo)" /></router-link>
				<div class="slider-title">
					<router-link :to="setPath(item.id)">{{item.title}}</router-link>
				</div>
			</swiper-slide>
			<!-- 以下控件元素均为可选 -->
			<div class="swiper-pagination" slot="pagination"></div>
			<!--<div class="swiper-button-prev" slot="button-prev"></div>-->
			<!--<div class="swiper-button-next" slot="button-next"></div>-->
			<!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
		</swiper>
	</div>
</template>
<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	import store from '@/store'
	import $ from 'jquery'
	require('swiper/dist/css/swiper.css')
	export default {
		data() {
			return {
				swiperOption: {
					// 所有配置均为可选（同Swiper配置） 

					pagination: '.swiper-pagination',
					//					prevButton: '.swiper-button-prev',
					//					nextButton: '.swiper-button-next',
					//					scrollbar: '.swiper-scrollbar',
					observer: true,
					observeParents: true,
					centeredSlides: true,
					paginationClickable: true,
					autoplayDisableOnInteraction: false,
					loop: true,
					autoplay: 3000,
					spaceBetween: 0,
					paginationBulletRender: function(swiper, index, className) {
						return '<span class="' + className + '" style="background: #007abc;"></span>';
					},
					onInit: function(swiper) {
						//Swiper初始化了
						//console.log(swiper.activeIndex);提示Swiper的当前索引
					},
					onTransitionStart(swiper) {
						//console.log("每次轮播结束后调用")
						$(".swiper-pagination-bullet").css("background", "white")
						$(".swiper-pagination-bullet-active").css("background", "#007abc")
					},
					onPaginationRendered: function(swiper, paginationContainer) {
						//生成分页器时执行
						$(".swiper-pagination-bullet").css("background", "white")
						$(".swiper-pagination-bullet").css("opacity", "1")
						$(".swiper-pagination-bullet").first().css("background", "#007abc")
					}
				}
			}
		},
		props: ['data'],
		computed: {},
		methods: {
			setPath: function(newsId) {
				return '/news' + newsId
			},
			setImage: function(url) {
				return store.state.StaticStore.baseUrl + '/data/' + url
			},
			changeArticle: function(arti) {
				store.commit("changeArticle", arti)
			}
		}
	}
</script>